<template>
	<view>
		<!-- 头部 -->
		<up-navbar>
			<template #left>
				<div style="display: flex;align-items: center;">
					<up-icon name="arrow-left" size="19" @tap="backPage"></up-icon>
					<div class="login_tit">验证码登录
						<div class="line"></div>
					</div>

				</div>
			</template>
		</up-navbar>
		<!-- 头部 -->
		<div style="height:354rpx;"></div>
		<!-- 表单 -->
		<up-form labelPosition="left" :model="model1" :rules="rules" class="login_form">
			<up-form-item label="手机号" prop="userInfo.account" :borderBottom="true" labelWidth="120rpx">
				<up-input v-model="model1.userInfo.account" border="none" placeholder="请输入手机号"
					style="margin-left: 20rpx;"></up-input>
			</up-form-item>
			<up-form-item label="验证码" prop="userInfo.code" :borderBottom="true" labelWidth="120rpx">
				<up-input placeholder="请输入验证码" border="0" v-model="model1.userInfo.code">
					<template #suffix>
						<up-button ref="uCodeRef" @tap="getCode" :text="tips || '获取验证码'" type="success" size="mini"
							:disabled="counting"></up-button>
					</template>
					<!-- #ifndef APP-NVUE -->
				</up-input>
			</up-form-item>
		</up-form>
		<div class="box1"><up-button text="登录" color="linear-gradient(to right, #93D2F3, #4095E5 100%)"
				class="login_btn1" @tap="PhoneCodeLogin"></up-button></div>

		<!-- 表单 -->
	</view>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
import { UserLogin } from '../../utils/api';
import { GetCode, CodeLogin } from '../../utils/user';
const model1 = ref({
	userInfo: {
		account: '',
		code: ''
	}
})
const rules = ref({
	'userInfo.account': {
		type: 'string',
		required: true,
		message: '请填写规则手机号',
		trigger: ['blur', 'change'],
		max: 11,
		validator: (rule, value, callback) => {
			const phoneReg = /^1[3-9]\d{9}$/;
			if (value && !phoneReg.test(value)) {
				callback(new Error('请输入正确的手机号'));
			} else {
				callback();
			}
		}
	},
})
// 使用 ref 创建响应式引用  
const formRef = ref(null);
const isShowEye = ref(false)

// 获取全局属性
const { proxy } = getCurrentInstance();
const uCodeRef = ref(null);
const tips = ref('');
const seconds = ref(60);
const counting = ref(false);


const getCode = async () => {
	// 检查手机号是否填写
	if (!model1.value.userInfo.account) {
		uni.$u.toast('请输入手机号');
		return;
	}

	// 验证手机号格式
	const phoneReg = /^1[3-9]\d{9}$/;
	if (!phoneReg.test(model1.value.userInfo.account)) {
		uni.$u.toast('请输入正确的手机号');
		return;
	}

	// 开始倒计时
	counting.value = true;
	tips.value = `重新发送(${seconds.value}s)`;

	// 模拟向后端请求验证码
	uni.showLoading({
		title: '正在获取验证码',
	});
	try {
		let res = await GetCode({
			phone: model1.value.userInfo.account
		})
		console.log(res)
		if(res.code == 200){
			setTimeout(() => {
				uni.hideLoading();
				uni.$u.toast('验证码已发送');
			}, 1000);
		}
	} catch (e) {
		console.log(e)
	}
	
	// 倒计时逻辑
	const timer = setInterval(() => {
		seconds.value--;
		tips.value = `重新发送(${seconds.value}s)`;

		if (seconds.value <= 0) {
			clearInterval(timer);
			counting.value = false;
			tips.value = '';
			seconds.value = 60;
		}
	}, 1000);
};
const codeChange = (text) => {
	tips.value = text;
};
const backPage = () => {
	uni.navigateTo({
		url: '/pages/login/login',
	})
}
const PhoneCodeLogin = async () => {
	console.log(model1.value.userInfo)
	try {
		let res = await CodeLogin({ phone: model1.value.userInfo.account, phoneCode: model1.value.userInfo.code })
		console.log(res)
		if (res.code == 200) {
			uni.setStorageSync('token', res.data)
			// 保存到本地存储，永久记录已同意
			uni.setStorageSync('agreedPolicy', true)
			uni.switchTab({
				url: '/pages/workbenches/workbenches'
			})
			uni.showToast({
				title: '登录成功',
				icon: 'success',
				duration: 2000
			})
		}
	} catch (e) {
		console.log(e)
	}
}
</script>

<style lang="scss">
.login_form {
	padding-left: 66rpx;
	padding-right: 40rpx;

}

/* 设置表单标签不换行并增加最小宽度 */
.login_tit {
	width: 192rpx;
	height: 46rpx;
	line-height: 46rpx;
	color: rgba(64, 149, 229, 1);
	font-size: 32rpx;
	text-align: left;
	font-family: PingFangSC-regular;
	margin-left: 32rpx;

	.line {
		width: 204rpx;
		height: 2rpx;
		line-height: 40rpx;
		border-radius: 6rpx;
		background-color: rgba(64, 149, 229, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
	}
}

.box1 {
	width: 100%;
	margin-top: 50rpx;
	display: flex;
	justify-content: center;

	.login_btn1 {
		width: 638rpx;
		height: 82rpx;
		line-height: 44rpx;
		border-radius: 8rpx;
		background: linear-gradient(88.71deg, rgba(147, 210, 243, 1) 15.3%, rgba(64, 149, 229, 1) 74.51%);
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		text-align: center;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(206, 206, 206, 0.37);
		font-family: -regular;
	}
}
</style>
